.headBox {
  height: 0.88rem;
  display: flex;
  margin: 0 0.3rem;
  justify-content: space-between;
  align-items: center;
}
.headBox .titleBox {
  position: relative;
  width: 1.6rem;
  height: 0.59rem;
}
.headBox .titleBox .line {
  position: absolute;
  width: 1.56rem;
  height: 0.16rem;
  background: #60A7F6;
  opacity: 0.48;
  bottom: 0.08rem;
  left: 0;
}
.headBox .titleBox .title {
  color: #1E2023;
  font-size: 0.4rem;
}
.headBox .iconBox {
  display: flex;
  justify-content: space-between;
  width: 1.36rem;
}
.headBox .iconBox .searchBox {
  width: 0.44rem;
  height: 0.44rem;
  background: url(../img/cate/nav%20bar_icon_search.png) no-repeat;
  background-size: cover;
}
.headBox .iconBox .messBox {
  width: 0.44rem;
  height: 0.44rem;
  background: url(../img/cate/nav%20bar_icon_comment.png) no-repeat;
  background-size: cover;
}
.wallPaper {
  height: 8.2rem;
  margin: 0 0.3rem;
  position: relative;
  margin-top: 0.15rem;
}
.wallPaper .img {
  width: 100%;
  height: 100%;
}
.wallPaper .infoBox {
  position: absolute;
  font-size: 0.24rem;
  color: #fff;
  bottom: 0.2rem;
  right: 0.3rem;
  display: flex;
  align-items: center;
}
.wallPaper .infoBox .bg {
  width: 0.28rem;
  height: 0.28rem;
  background: url(../img/cate/icon_number%20of%20images.png) no-repeat;
  background-size: cover;
  margin-left: 0.04rem;
}
.hotCreator .titleBox {
  height: 0.54rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.3rem;
  margin-top: 0.72rem;
}
.hotCreator .titleBox .leftBox {
  display: flex;
  align-items: center;
}
.hotCreator .titleBox .leftBox .line {
  width: 8px;
  height: 40px;
  background: #60A7F6;
  border-radius: 0.04rem;
}
.hotCreator .titleBox .leftBox .title {
  margin-left: 0.08rem;
  font-size: 0.36rem;
  color: #1E2023;
}
.hotCreator .titleBox .moreBox {
  display: flex;
  align-items: center;
}
.hotCreator .titleBox .moreBox .text {
  font-size: 0.24rem;
  color: #60A7F6;
}
.hotCreator .titleBox .moreBox .moreIcon {
  margin-left: 0.02rem;
  width: 0.32rem;
  height: 0.32rem;
  background: url(../img/cate/home_icon_more.png) no-repeat;
  background-size: cover;
}
.hotCreator .creatorUl {
  width: auto;
  display: flex;
  overflow-x: scroll;
  margin-left: 0.3rem;
  margin-top: 0.24rem;
}
.hotCreator .creatorUl li {
  width: 3.06rem;
  height: 4.9rem;
  flex-shrink: 0;
  position: relative;
  text-align: center;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: column;
  margin-right: 0.14rem;
  border-radius: 0.08rem;
}
.hotCreator .creatorUl li .bg {
  width: 100%;
  height: 2.66rem;
}
.hotCreator .creatorUl li .img {
  position: absolute;
  width: 1.18rem;
  height: 1.18rem;
  bottom: 1.68rem;
  left: 0.94rem;
}
.hotCreator .creatorUl li .name {
  font-size: 0.28rem;
  color: #1E2023;
  margin-top: 0.69rem;
}
.hotCreator .creatorUl li .label {
  font-size: 0.2rem;
  color: #8A93A1;
  margin-top: 0.1rem;
}
.hotCreator .creatorUl li .btn {
  width: 0.8rem;
  height: 0.4rem;
  border-radius: 0.2rem;
  background-color: #60A7F6;
  font-size: 0.24rem;
  color: #fff;
  margin: 0 auto;
  margin-top: 0.24rem;
  border: none;
  outline: :none;
  line-height: 0.4rem;
}
.hotCreator .creatorUl::-webkit-scrollbar {
  display: none;
}
.topPick {
  margin-top: 0.51rem;
}
.topPick .titleBox {
  display: flex;
  margin: 0 0.3rem;
  align-items: center;
}
.topPick .titleBox .line {
  width: 8px;
  height: 40px;
  background: #60A7F6;
  border-radius: 0.04rem;
}
.topPick .titleBox .title {
  margin-left: 0.08rem;
  font-size: 0.36rem;
  color: #1E2023;
}
.topPick .weekPick {
  height: 3.46rem;
  margin: 0 0.3rem;
  margin-top: 0.24rem;
  font-size: #fff;
  text-align: center;
  position: relative;
}
.topPick .weekPick .bg {
  width: 100%;
  height: 100%;
}
.topPick .weekPick .title {
  position: absolute;
  top: 1.33rem;
  font-size: 0.28rem;
  left: 50%;
  transform: translateX(-50%);
}
.topPick .weekPick .text {
  position: absolute;
  top: 1.83rem;
  font-size: 0.18rem;
  left: 50%;
  transform: translateX(-50%);
}
.topPick .pickUl {
  margin: 0 0.3rem;
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-between;
}
.topPick .pickUl li {
  width: 3.38rem;
  height: 3.38rem;
  border-radius: 0.08rem;
  position: relative;
  color: #fff;
  text-align: center;
}
.topPick .pickUl li .img {
  width: 100%;
  height: 100%;
}
.topPick .pickUl li .title {
  position: absolute;
  top: 1.29rem;
  font-size: 0.28rem;
  left: 50%;
  transform: translateX(-50%);
}
.topPick .pickUl li .text {
  position: absolute;
  top: 1.79rem;
  font-size: 0.18rem;
  left: 50%;
  transform: translateX(-50%);
}
.topPick .pickUl li:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.35);
  width: 3.38rem;
  height: 3.38rem;
  border-radius: 0.08rem;
}
.clockResort {
  margin-top: 0.52rem;
}
.clockResort .titleBox {
  height: 0.54rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.3rem;
}
.clockResort .titleBox .leftBox {
  display: flex;
  align-items: center;
}
.clockResort .titleBox .leftBox .line {
  width: 8px;
  height: 40px;
  background: #60A7F6;
  border-radius: 0.04rem;
}
.clockResort .titleBox .leftBox .title {
  margin-left: 0.08rem;
  font-size: 0.36rem;
  color: #1E2023;
}
.clockResort .titleBox .moreBox {
  display: flex;
  align-items: center;
}
.clockResort .titleBox .moreBox .text {
  font-size: 0.24rem;
  color: #60A7F6;
}
.clockResort .titleBox .moreBox .moreIcon {
  margin-left: 0.02rem;
  width: 0.32rem;
  height: 0.32rem;
  background: url(../img/cate/home_icon_more.png) no-repeat;
  background-size: cover;
}
.clockResort .clockUl {
  display: flex;
  margin: 0 0.3rem;
  margin-top: 0.24rem;
  justify-content: space-between;
}
.clockResort .clockUl li {
  width: 3.38rem;
  display: flex;
  flex-direction: column;
}
.clockResort .clockUl li .imgBox {
  position: relative;
}
.clockResort .clockUl li .imgBox .img {
  width: 100%;
  height: 3.38rem;
}
.clockResort .clockUl li .imgBox .iconBox {
  display: flex;
  position: absolute;
  right: 0.12rem;
  bottom: 0.1rem;
}
.clockResort .clockUl li .imgBox .iconBox .icon {
  width: 0.28rem;
  height: 0.28rem;
  background: url(../img/cate/icon_number%20of%20images.png) no-repeat;
  background-size: cover;
}
.clockResort .clockUl li .imgBox .iconBox .count {
  color: #fff;
  font-size: 0.2rem;
}
.clockResort .clockUl li .text {
  margin-top: 0.2rem;
  font-size: 0.24rem;
  color: #000;
}
.clockResort .clockUl li .infoBox {
  display: flex;
  justify-content: space-between;
  margin-top: 0.24rem;
  align-items: center;
}
.clockResort .clockUl li .infoBox .info {
  display: flex;
}
.clockResort .clockUl li .infoBox .info .headImg {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
}
.clockResort .clockUl li .infoBox .info .name {
  font-size: 0.2rem;
  color: #68707A;
  margin-left: 0.08rem;
}
.clockResort .clockUl li .infoBox .position {
  font-size: 0.2rem;
  color: #68707A;
}
